/* 响应式设计基础样式 */
:root {
  --page-padding-small: 12px;
  --page-padding-medium: 16px;
  --page-padding-large: 24px;
  
  --font-size-small: 14px;
  --font-size-medium: 16px;
  --font-size-large: 18px;
  
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-large: 16px;
}

/* 小屏幕设备 (手机, 600px 及以下) */
@media only screen and (max-width: 600px) {
  .responsive-container {
    padding: var(--page-padding-small);
  }
  
  .responsive-title {
    font-size: 18px;
  }
  
  .responsive-form-item {
    margin-bottom: 16px;
  }
  
  .responsive-button {
    height: 40px;
  }
}

/* 中等屏幕设备 (平板电脑, 600px 到 992px) */
@media only screen and (min-width: 600px) and (max-width: 992px) {
  .responsive-container {
    padding: var(--page-padding-medium);
    max-width: 90%;
    margin: 0 auto;
  }
  
  .responsive-title {
    font-size: 22px;
  }
  
  .responsive-form-item {
    margin-bottom: 20px;
  }
  
  .responsive-button {
    height: 44px;
  }
}

/* 大屏幕设备 (笔记本/台式机, 992px 以上) */
@media only screen and (min-width: 992px) {
  .responsive-container {
    padding: var(--page-padding-large);
    max-width: 80%;
    margin: 0 auto;
  }
  
  .responsive-title {
    font-size: 24px;
  }
  
  .responsive-form-item {
    margin-bottom: 24px;
  }
  
  .responsive-button {
    height: 48px;
  }
}

/* 图片上传区域响应式样式 */
.responsive-uploader {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

@media only screen and (min-width: 600px) {
  .responsive-uploader {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }
}

@media only screen and (min-width: 992px) {
  .responsive-uploader {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }
}